body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #c3ec52 10%, #0ba29d);
  animation: backgroundAnim 10s infinite alternate;
}

@keyframes backgroundAnim {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

#app {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
  animation: popAnim 2s ease-out;
}

@keyframes popAnim {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

#sudokuGrid {
  display: grid;
  grid-template-columns: repeat(9, 50px);
  grid-template-rows: repeat(9, 50px);
  gap: 3px; 
  margin: 20px 0;
  border: 3px solid #333; /* External border */
}

.cell {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 22px;
  color: #333;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  transform: scale(0.9);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s;
  border: 1px solid #333; /* Normal cell border */
}

.cell:nth-child(3n) {
  border-right: 3px solid #333; /* Right border of boxes */
}

.cell:nth-child(n + 19):nth-child(-n + 27),
.cell:nth-child(n + 46):nth-child(-n + 54) {
  border-bottom: 3px solid #333; /* Bottom border of boxes */
}

.cell:nth-child(3n + 1) {
  border-left: 3px solid #333; /* Left border of boxes */
}

.cell:nth-child(-n + 9) {
  border-top: 3px solid #333; /* Top border */
}

.cell:hover {
  transform: scale(1.05);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.7);
}

.cell input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 22px;
  border: none;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

button {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  border: none;
  color: white;
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
  transition: background 0.5s, transform 0.2s;
}

button:hover {
  background: linear-gradient(135deg, #f5576c, #f093fb);
  transform: scale(1.05);
}

button:active {
  transform: scale(0.95);
}

select {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 20px;
  border: 2px solid #333;
  background: linear-gradient(to right, #43e97b, #38f9d7);
  color: #333;
  font-size: 16px;
  outline: none;
}